<template>
    <div class="qqkh">
        <div class="qqkh-content">
            <div class="qqkh-content-left" v-if="imgArr.length > 0">
                <img :src="imgArr[0].image_url" alt="">
            </div>
            <div class="qqkh-content-right">
                <div class="qqkh-content-right-top">
                    <h2>我们遍布全球的客户</h2>
                    <h3>OUR GLOBAL CUSTOMERS</h3>
                </div>
            </div>
        </div>
        <div class="qqkh-content-bottom">
            <p>
                Orpheo(奥菲欧)品牌导览系统应用于全球30多个国家的博物馆、艺术馆和景区，包括世博会博物馆、上海博物馆（东馆）、南京博物院、扬州中国大运河博物馆、山东博物馆、广东省博物馆、伊利集团、蒙牛集团、卢浮宫、凡尔赛宫、奥赛博物馆、奔驰博物馆、美国航空航天局、美国白宫、日本皇宫、悉尼歌剧院等。
            </p>
        </div>
        <div class="qjkh-box">
            <div class="qjkh-box-bottom" v-if="imgArr1.length > 0">
                <template v-for="(item, index) in imgArr1" :key="index">
                    <img :src="item.image_url" alt="">
                </template>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getQqkhList } from '@/api/rjxt'

const rjxtList = ref([])
const imgArr = ref([])
const imgArr1 = ref([])

onMounted(() => {
    getQqkhList().then(res => {
        rjxtList.value = res.data

        imgArr.value = rjxtList.value.filter(item => item.position === 'content')
        imgArr1.value = rjxtList.value.filter(item => item.position === 'content_01')
    })
})
</script>

<style scoped>
/* 媒体查询 手机 */
@media (max-width: 768px) {
    .qqkh {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        padding: 0 20px;
    }

    .qqkh-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-content: center;
    }

    .qqkh-content-bottom {
        margin: 30px 0;
    }

    .qqkh-content-left img {
        max-width: 100%;
        height: auto;
    }

    .qqkh-content-left,
    .qqkh-content-right-top {
        max-width: 100%;
        height: auto;
    }

    .qqkh-content-right-top h2 {
        font-size: 36px;
        line-height: 1.75;
        font-weight: normal;
    }

    .qqkh-content-right-top h3 {
        font-size: 20px;
        line-height: 1.75;
        color: #000000;
        font-weight: normal;
    }

    .qjkh-box-bottom {
        padding: 0 20px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 16px;
        margin-bottom: 30px;
    }

    .qjkh-box-bottom img {
        max-width: 100%;
        height: auto;
    }
}

/* 媒体查询 平板 */
@media (min-width: 769px) and (max-width: 1024px) {
    .qqkh {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-content: center;
        padding: 0 100px;
    }
    .qqkh-content {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .qqkh-content-bottom p {
        padding: 0 20px;
        text-align: left;
        font-size: 16px;
        line-height: 1.75;
        color: #000000;
        font-weight: normal;
    }

    .qqkh-content-left img {
        max-width: 100%;
        height: auto;
    }

    .qqkh-content-right {
        width: 100%;
    }

    .qqkh-content-right-top h2 {
        font-size: 36px;
        line-height: 1.75;
        font-weight: normal;
    }

    .qqkh-content-right-top h3 {
        font-size: 20px;
        line-height: 1.75;
        color: #000000;
        font-weight: normal;
    }

    .qjkh-box-bottom img {
        width: 80%;
        height: auto;
    }

    .qjkh-box-bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 20px auto;
    }
}

/* 媒体查询 电脑 */
@media (min-width: 1025px) {
    .qqkh {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-content: center;
        padding: 0 150px;
    }

    .qqkh-content {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .qqkh-content-bottom p {
        text-align: left;
        font-size: 16px;
        line-height: 1.75;
        color: #000000;
        font-weight: normal;
    }

    .qqkh-content-left img {
        max-width: 100%;
        height: auto;
    }

    .qqkh-content-right {
        width: 100%;
    }

    .qqkh-content-right-top h2 {
        font-size: 36px;
        line-height: 1.75;
        font-weight: normal;
    }

    .qqkh-content-right-top h3 {
        font-size: 20px;
        line-height: 1.75;
        color: #000000;
        font-weight: normal;
    }

    .qjkh-box-bottom img {
        width: 80%;
        height: auto;
    }

    .qjkh-box-bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 20px auto;
    }
}
</style>
